<script setup>
import MoniterItem from '@/components/MoniterItem2.vue'
import canji from '@/assets/canji.png'
import fuxing from '@/assets/fuxing.png'
import jingshenbing from '@/assets/jingshenbing.png'
import waichulaowu from '@/assets/waichulaowu.png'
import waichushangxue from '@/assets/waichushangxue.png'
import { inject, onMounted, ref } from 'vue'
const $axios = inject('$axios')
let param = ref({
  cjrNum: 0,
  cjrhus: 0,
  fxNum: 0,
  fxhus: 0,
  jsbNum: 0,
  jsbhus: 0,
  wclwNum: 0,
  wclwhus: 0,
  wcsxNum: 0,
  wcsxhus: 0,
})
function specialPersons() {
  $axios.get('person_info/specialPersons').then(res => {
    console.log('specialPersons', res)
    res.data.data.forEach(item => {
      if (item.text == '残疾人') {
        param.value.cjrNum = item.num
        param.value.cjrhus = item.hus
      } else if (item.text == '服刑人员') {
        param.value.fxNum = item.num
        param.value.fxhus = item.hus
      } else if (item.text == '精神智障') {
        param.value.jsbNum = item.num
        param.value.jsbhus = item.hus
      } else if (item.text == '外出务工') {
        param.value.wclwhus = item.num
        param.value.wclwhus = item.hus
      } else {
        param.value.wcsxNum = item.num
        param.value.wcsxhus = item.hus
      }
    })
  })
}
onMounted(() => {
  specialPersons()
})
</script>

<template>
  <MoniterItem img="3" style="height: 100%" title="特殊人群信息">
    <template #content>
      <div class="special-main">
        <div class="main-row">
          <div class="special-item">
            <div class="item-img" :style="{ backgroundImage: 'url(' + fuxing + ')' }">
              <span class="bottom-text">独居老人</span>
            </div>
            <div class="item-text">
              <div>{{ param.fxNum }}<span>人</span></div>
              <!-- <span style="border-right: 1px solid #6fc0fb; height: 11px; width: 0; margin: 0 4px"></span>
              <div>{{ param.fxhus }}<span>户</span></div> -->
            </div>
          </div>
          <div class="special-item">
            <div class="item-img" :style="{ backgroundImage: 'url(' + canji + ')' }">
              <span class="bottom-text">残疾人口</span>
            </div>
            <div class="item-text">
              <div>{{ param.cjrNum }}<span>人</span></div>
              <!-- <span style="border-right: 1px solid #6fc0fb; height: 11px; width: 0; margin: 0 4px"></span>
              <div>{{ param.cjrhus }}<span>户</span></div> -->
            </div>
          </div>
          <div class="special-item">
            <div class="item-img" :style="{ backgroundImage: 'url(' + jingshenbing + ')' }">
              <span class="bottom-text">孕产妇</span>
            </div>
            <div class="item-text">
              <div>{{ param.jsbNum }}<span>人</span></div>
              <!-- <span style="border-right: 1px solid #6fc0fb; height: 11px; width: 0; margin: 0 4px"></span>
              <div>{{ param.jsbhus }}<span>户</span></div> -->
            </div>
          </div>
        </div>
        <div class="main-row">
          <div class="special-item">
            <div class="item-img" :style="{ backgroundImage: 'url(' + waichulaowu + ')' }">
              <span class="bottom-text">困境儿童</span>
            </div>
            <div class="item-text">
              <div>{{ param.wclwNum }}<span>人</span></div>
              <!-- <span style="border-right: 1px solid #6fc0fb; height: 11px; width: 0; margin: 0 4px"></span>
              <div>{{ param.wclwhus }}<span>户</span></div> -->
            </div>
          </div>
          <div class="special-item">
            <div class="item-img" :style="{ backgroundImage: 'url(' + waichushangxue + ')' }">
              <span class="bottom-text">透析人员</span>
            </div>
            <div class="item-text">
              <div>{{ param.wcsxNum }}<span>人</span></div>
              <!-- <span style="border-right: 1px solid #6fc0fb; height: 11px; width: 0; margin: 0 4px"></span>
              <div>{{ param.wcsxhus }}<span>户</span></div> -->
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.special-main {
  height: 100%;
  .main-row {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 10px;

    .special-item {
      padding: 0 10px;
      margin: 0 20px;
      .item-img {
        width: 110px;
        height: 90px;
        margin: auto;
        background-size: 100% 130%;
        background-repeat: no-repeat;
        text-align: center;
        line-height: 160px;

        .bottom-text {
          opacity: 1;
          font-size: 16px;
          font-weight: 500;
        }
      }
      .item-text {
        margin: auto;
        text-align: center;
        div {
          display: inline-block;
          color: #37fac6;
          font-size: 20px;
          font-weight: 500;

          span {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
